<template>
  <div class="login" ref="vantaRef">
    <div class="box p-20 flex flex-direction justify-center align-center">
      <moreCompontents.welcome />
      <moreCompontents.btn @goin="logoIn" />
    </div>
  </div>
</template>

<script setup>
import * as THREE from "three";
import { useRouter } from "vue-router";
import halo from "vanta/src/vanta.globe";
import * as moreCompontents from "./components/exportModel.ts";
import { onMounted, ref, onBeforeUnmount } from "vue";
import { useStore } from "vuex";
let router = useRouter();
let { commit } = useStore();
const vantaRef = ref(null);
let vantaEffect = null;
// 生命周期
onBeforeUnmount(() => {
  if (vantaEffect) {
    vantaEffect.destroy();
  }
});
onMounted(() => {
  vantaEffect = halo({
    el: vantaRef.value,
    THREE,
    background: "#000",
  });
});
// 请求 登录
let logoIn = async () => {
  commit("setToken", 'defToken');
  await router.push("/home");
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
}
.box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba($color: #000, $alpha: 0.6);
}
</style>
